<template>
	<view class="rf-order-detail">
		<view class="order-detail" v-if="orderDetail.product">
			<view class="rf-address-section">
				<view class="order-content">
					<i class="iconfont iconshouhuodizhi"></i>
					<view class="cen">
						<view class="top">
							<text class="name">{{orderDetail.receiver_name}}</text>
							<text class="mobile">{{orderDetail.receiver_mobile}}</text>
						</view>
						<text class="address">{{ orderDetail.receiver_region_name }} {{orderDetail.receiver_address}}</text>
					</view>
					<!--<i class="iconfont iconyou"></i>-->
				</view>
				<image class="a-bg"
				       src=""></image>
			</view>
			<view class="rf-goods-section">
				<view class="g-header b-b">
					<text class="name in1line">订单号：{{orderDetail.order_sn}}</text>
					<text class="name red">{{ orderDetail.order_status | orderStatusFilter }}</text>
				</view>
				<!-- 商品列表 -->
				<view class="g-item" v-for="(item, index) in orderDetail.product" :key="index"
				      @tap="navTo(`/pages/product/product?id=${item.product_id}`)">
					<rf-image :src="item.product_picture"></rf-image>
					<view class="right">
						<text class="title clamp in2line">{{ item.product_name }}</text>
						<text class="spec">{{ item.sku_name || '基础款' }}  * {{ item.num }}</text>
						<view class="price-box">
							<text class="price-wrapper">
								<text class="price base-color">￥ {{item.product_money}}</text>
							</text>
							<!--<text class="status" @tap.stop="navTo(`/pages/order/shipping/shipping?id=${item.order_id}`)" v-if="item.shipping_status == 1">查看物流</text>-->
							<text class="status spec-color" @tap.stop="">{{ item | filterProductStatus }}</text>
						</view>
						<view class="btn-box">
							<button
									class="action-btn recom"
									v-if="(item.order_status == 3 || item.order_status == 4) && item.is_evaluate == 0 && (item.refund_status == 0 || item.refund_status == -2 || item.refund_status == -3)"
									@tap.stop="navToEvaluation(item)"
							>
								我要评价
							</button>
							<button
									class="action-btn recom"
									v-if="(item.order_status == 3 || item.order_status == 4) && item.is_evaluate == 1 && (item.refund_status == 0 || item.refund_status == -2 || item.refund_status == -3)"
									@tap.stop="navToEvaluation(item, 'add')"
							>
								追加评价
							</button>
							<button
									class="action-btn recom"
									v-if="item.order_status == 1 && item.shipping_status != 1 && (item.refund_status == 0 || item.refund_status == -3)"
									@tap.stop="navToRefund(item, 1)"
							>
								申请退款
							</button>
							<button
									class="action-btn recom"
									v-if="item.order_status == 2 && item.shipping_status == 1 && (item.refund_status == 0 || item.refund_status == -3)"
									@tap.stop="navToRefund(item, 2)"
							>
								申请退换
							</button>
							<button
									class="action-btn"
									v-if="(item.order_status == 3 || item.order_status == 4) && (item.refund_status == 0 || item.refund_status == -3)"
									@tap.stop="navToRefund(item, 3)">
								申请退换
							</button>
							<button
									class="action-btn recom"
									v-if="(item.order_status == 2 || item.order_status == 3 || item.order_status == 4) && item.refund_status == 2"
									@tap.stop="navToShippingReturn(item)"
							>
								填写退货信息
							</button>
							<button
									class="action-btn"
									v-if="item.refund_status == 1 || item.refund_status == 2 || item.refund_status == 3 || item.refund_status == 4 || item.refund_status == -1"
									@tap.stop="handleCloseOrderRefundApply(item.order_status, item.id)">
								取消退款
							</button>
						</view>
					</view>
				</view>
			</view>
			<!-- 优惠明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<view class="cell-icon">
						券
					</view>
					<text class="cell-tit clamp">优惠券</text>
					<text class="cell-tip active">
						{{ orderDetail.coupon && orderDetail.coupon.title || '未使用优惠券' }}
					</text>
					<text class="cell-more wanjia wanjia-gengduo-d"></text>
				</view>
				<view class="yt-list-cell b-b">
					<view class="cell-icon">
						寄
					</view>
					<text class="cell-tit clamp">配送方式</text>
					<text class="cell-tip active">
						{{ orderDetail.shipping_type | filterShippingType }}
					</text>
					<text class="cell-more wanjia wanjia-gengduo-d"></text>
				</view>
				<view class="yt-list-cell b-b" v-if="orderDetail.company_name">
					<view class="cell-icon">
						司
					</view>
					<text class="cell-tit clamp">快递公司</text>
					<text class="cell-tip active">
						{{ orderDetail.company_name }}
					</text>
					<text class="cell-more wanjia wanjia-gengduo-d"></text>
				</view>
				<view class="yt-list-cell b-b" v-if="orderDetail.payment_explain != '积分兑换'">
					<view class="cell-icon hb">
						减
					</view>
					<text class="cell-tit clamp">积分抵扣</text>
					<text class="cell-tip disabled"></text>
					<text class="cell-tip disabled">已用{{ orderDetail.point || 0 }}积分抵用{{ orderDetail.point_money || 0 }}元</text>
				</view>
				<view class="yt-list-cell b-b" v-else>
					<view class="cell-icon hb">
						减
					</view>
					<text class="cell-tit clamp">积分下单</text>
					<text class="cell-tip disabled"></text>
					<text class="cell-tip disabled">消耗了{{ orderDetail.point || 0 }}积分</text>
				</view>
			</view>
			<!-- 金额明细 -->
			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">商品金额</text>
					<text class="cell-tip red">￥{{ orderDetail.order_money }}</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">优惠金额</text>
					<text class="cell-tip red">-￥ {{ orderDetail.coupon_money }}</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">运费</text>
					<text class="cell-tip red">
						<text>￥ {{ orderDetail.shipping_money }}</text>
					</text>
				</view>
				<view class="yt-list-cell b-b" v-if="orderDetail.invoice">
					<text class="cell-tit clamp">开具发票</text>
					<text class="cell-tip red in1line">
						<text>
							{{ `电子发票 -${parseInt(orderDetail.invoice && orderDetail.invoice.type, 10) === 1 ? '公司' :
							'个人'}-${orderDetail.invoice && orderDetail.invoice.title} [ ${orderDetail.invoice &&
							orderDetail.invoice.content} ]` }}
						</text>
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">发票税费</text>
					<text class="cell-tip red">
						<text>￥ {{ orderDetail.tax_money }}</text>
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">赠送积分</text>
					<text class="cell-tip">
						<text>{{ orderDetail.give_point }} 积分</text>
					</text>
				</view>
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">实付金额</text>
					<text class="cell-tip red">￥ {{ orderDetail.pay_money }}</text>
				</view>
			</view>

			<view class="yt-list">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">备注</text>
					<text class="cell-tip">{{ orderDetail.buyer_message }}</text>
				</view>
			</view>
			<view class="uni-timeline">
				<view
						class="uni-timeline-item"
						:class="{'uni-timeline-first-item': index === 0, 'uni-timeline-last-item': index === orderTimeLine.length - 1, }"
						v-for="(item, index) in orderTimeLine"
						:key="index">
					<view class="uni-timeline-item-divider"></view>
					<view class="uni-timeline-item-content">
						<view>
							{{ item.value }}
						</view>
						<view class="datetime">
							{{ item.time | time }}
						</view>
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<view class="footer" v-if="orderDetail.order_status != 1">
				<button class="action-btn recom" v-if="orderDetail.order_status == 2"
				        @tap="handleOrderOperation(orderDetail, 'delivery')">确认收货
				</button>
				<button class="action-btn recom" v-if="(orderDetail.order_status == 3 || orderDetail.order_status == 4) && orderDetail.is_evaluate == 0"
				        @tap="handleOrderOperation(orderDetail, 'evaluation')">批量评价
				</button>
				<button class="action-btn recom" v-if="orderDetail.order_status == 0"
				        @tap="navTo(`/pages/user/money/pay?id=${orderDetail.id}`)">立即支付
				</button>
				<button class="action-btn" v-if="(orderDetail.order_status == 4 || orderDetail.order_status == 3 || orderDetail.order_status == 2) && orderDetail.is_virtual != 1"
				        @tap="handleOrderOperation(orderDetail, 'shipping')">查看物流
				</button>
				<button class="action-btn recom" v-if="orderDetail.order_status == -4"
				        @tap="handleOrderOperation(orderDetail, 'delete')">删除订单
				</button>
				<button class="action-btn" v-if="orderDetail.order_status == 0"
				        @tap="handleOrderOperation(orderDetail, 'close')">取消订单
				</button>
			</view>
		</view>

		<!-- 404页面 -->
		<view v-if="!orderDetail.product && !loading">
			<rf-no-data class="rf-no-data" :custom="true">
				<view class="title" @tap="getOrderDetail">
					{{ errInfo || '订单不存在' }}
				</view>
				<view @tap="getOrderDetail" slot="refresh" class="spec-color">重新加载</view>
			</rf-no-data>
		</view>
		<!--页面加载动画-->
		<rf-loading v-if="loading"></rf-loading>
	</view>
</template>

<script>
    import moment from '@/common/moment';
    import mConstData from '@/config/constData.config';
    import rfNoData from '@/components/rf-no-data';
    import {orderClose} from '@/api/product';
    import {
        orderDetail,
        closeOrderRefundApply,
        orderCustomerRefundClose,
        orderDelete,
        orderTakeDelivery
    } from '@/api/userInfo';

    export default {
        components: {
            rfNoData
        },
        data() {
            return {
                orderDetail: {},
                loading: true,
                errInfo: null,
                order_id: null
            }
        },
        computed: {
            orderTimeLine() {
                const timeLine = []
                if (this.orderDetail.created_at != 0) {
                    timeLine.push({time: this.orderDetail.created_at, value: '订单创建'});
                }
                if (this.orderDetail.close_time < (new Date().getTime() / 1000 && this.orderDetail.pay_time != 0)) {
                    timeLine.push({time: this.orderDetail.close_time, value: '未付款订单关闭时间'});
                }
                if (this.orderDetail.pay_time != 0) {
                    timeLine.push({time: this.orderDetail.pay_time, value: '订单支付'});
                }
                if (this.orderDetail.shipping_time != 0) {
                    timeLine.push({time: this.orderDetail.shipping_time, value: '买家要求发货'});
                }
                if (this.orderDetail.consign_time != 0) {
                    timeLine.push({time: this.orderDetail.consign_time, value: '卖家发货'});
                }
                if (this.orderDetail.sign_time != 0) {
                    timeLine.push({time: this.orderDetail.sign_time, value: '买家确认收货'});
                }
                if (this.orderDetail.finish_time != 0) {
                    timeLine.push({time: this.orderDetail.finish_time, value: '订单完成'});
                }
                return timeLine;
            }
        },
        filters: {
            time(val) {
                return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
            },
            orderStatusFilter(orderStatus) {
                let state = null;
                mConstData.orderStatus.forEach(orderItem => {
                    if (orderItem.key === parseInt(orderStatus, 10)) {
                        state = orderItem.value
                    }
                });
                return state;
            },
            filterProductStatus(item) {
                let status = null;
                if (parseInt(item.refund_status, 10) !== 0 && parseInt(item.refund_status, 10) !== -1 && parseInt(item.refund_status, 10) !== -2) {
                    mConstData.refundStatus.forEach(refundItem => {
                        if (refundItem.key === parseInt(item.refund_status, 10)) {
                            status = refundItem.value
                        }
                    })
                } else if (parseInt(item.order_status, 10) === 4) {
                    mConstData.evaluateStatus.forEach(evaluateItem => {
                        if (evaluateItem.key == item.is_evaluate) {
                            status = evaluateItem.value
                        }
                    })
                } else {
                    mConstData.orderStatus.forEach(orderItem => {
                        if (orderItem.key === parseInt(item.order_status, 10)) {
                            status = orderItem.value
                        }
                    });
                    // 有物流信息则说明已发货
                    if (item.order_status == 1 && item.shipping_status == 1) {
                        status = '已发货';
                    }
                }
                return status;
            },
            filterShippingType(value) {
                const data = ['', '物流配送', '买家自提', '本地配送'];
                return data[parseInt(value, 10)]
            }
        },
        onLoad(options) {
            this.order_id = options.id;
        },
        onShow() {
            this.initData();
        },
        methods: {
            navTo(route) {
                this.$mRouter.push({route});
            },
            navToEvaluation(item, type) {
                this.$mRouter.push({route: `/pages/order/evaluation/evaluation?data=${JSON.stringify(item)}&type=${type}`});
            },
            navToRefund(item, type) {
                this.$mRouter.push({route: `/pages/order/refund/refund?data=${JSON.stringify(item)}&refundType=${type}`});
            },
            navToShippingReturn(item) {
                this.$mRouter.push({route: `/pages/order/shipping/return?data=${JSON.stringify(item)}`});
            },
            // 订单操作
            handleOrderOperation(item, type, refund_type) {
                switch (type) {
                    case 'detail': // 订单详情
                        this.navTo(`/pages/order/detail?id=${item.id}`);
                        break;
                    case 'evaluation': // 我要评价
                        this.navTo(`/pages/order/evaluation/evaluation?order_id=${item.id}`);
                        break;
                    case 'close': // 取消订单
                        this.handleOrderClose(item.id);
                        break;
                    case 'delete': // 删除订单
                        this.handleOrderDelete(item.id);
                        break;
                    case 'shipping': // 查看物流
                        this.navTo(`/pages/order/shipping/shipping?id=${item.id}`);
                        break;
                    case 'delivery': // 确认收货
                        this.handleOrderTakeDelivery(item.id);
                        break;
                }
            },
            // 初始化数据
            initData() {
                this.getOrderDetail();
            },
            // 获取订单详情
            async getOrderDetail() {
                await this.$http.get(`${orderDetail}`, {
                    id: this.order_id
                }).then(r => {
                    this.loading = false;
                    this.orderDetail = r.data;
                }).catch(err => {
                    this.loading = false;
                    this.errInfo = err;
                })
            },
            // 取消订单
            async handleOrderClose(id) {
                await this.$http.get(`${orderClose}`, {
                    id
                }).then(() => {
                    this.$mHelper.toast('订单取消成功');
                    this.getOrderDetail();
                })
            },
            // 删除已关闭订单
            async handleOrderDelete(id) {
                await this.$http.delete(`${orderDelete}?id=${id}`, {}).then(() => {
                    this.$mHelper.toast('订单删除成功');
                    this.$mRouter.back();
                })
            },
            // 确认收货
            async handleOrderTakeDelivery(id) {
                await this.$http.get(`${orderTakeDelivery}`, {
                    id
                }).then(() => {
                    this.$mHelper.toast('确认收货成功');
                    this.getOrderDetail();
                })
            },
            // 产品退款/退货关闭申请
            async handleCloseOrderRefundApply(status, id) {
                let closeOrderApi = closeOrderRefundApply;
                if (parseInt(status, 10) === 4) {
                    closeOrderApi = orderCustomerRefundClose;
                }
                await this.$http.post(`${closeOrderApi}`, {
                    id
                }).then(r => {
                    this.$mHelper.toast('取消成功');
                    this.getOrderDetail();
                })
            }
        }
    }
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.order-detail {
		padding-bottom: 100upx;
	}

	.rf-goods-section {
		.g-header {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.red {
				color: $base-color;
			}
		}

		.g-item {
			border-bottom: 1upx solid rgba(0, 0, 0, 0.1);
		}

		.right {
			.price-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $font-color-dark;
				border-bottom: 1upx solid rgba(0, 0, 0, 0.05);

				.price-wrapper {
					margin-bottom: 10upx;
					flex: 1;

					.price {
						font-size: $font-sm;
						margin-bottom: 4upx;
					}

					.number {
						font-size: $font-sm;
						color: $font-color-base;
						margin-left: $font-sm;
					}
				}

				.status {
					font-size: 24upx;
					margin-left: $spacing-sm;
					color: $base-color;
				}

				.spec-color {
					color: $font-color-spec;
				}
			}
			.btn-box {
				.action-btn {
					font-size: $font-sm;
					padding: 0 $spacing-base;
					text-align: center;
					height: 48upx;
					line-height: 48upx;
				}
			}
		}
	}

	.yt-list {
		margin-top: 16upx;
		background: #fff;

		.yt-list-cell {
			display: flex;
			align-items: center;
			padding: 10upx 30upx 10upx 40upx;
			line-height: 70upx;
			position: relative;

			&.cell-hover {
				background: #fafafa;
			}

			&.b-b:after {
				left: 30upx;
			}

			.cell-icon {
				height: 32upx;
				width: 32upx;
				font-size: 22upx;
				color: #fff;
				text-align: center;
				line-height: 32upx;
				background: #f85e52;
				border-radius: 4upx;
				margin-right: 12upx;

				&.hb {
					background: #ffaa0e;
				}

				&.lpk {
					background: #3ab54a;
				}

			}

			.cell-more {
				align-self: center;
				font-size: 24upx;
				color: $font-color-light;
				margin-left: 8upx;
				margin-right: -10upx;
			}

			.cell-tit {
				flex: 1;
				font-size: 26upx;
				color: $font-color-light;
				margin-right: 10upx;
			}

			.cell-tip {
				font-size: 26upx;
				color: $font-color-dark;

				&.disabled {
					color: $font-color-light;
				}

				&.active {
					color: $base-color;
				}

				&.red {
					color: $base-color;
				}
			}

			&.desc-cell {
				.cell-tit {
					max-width: 90upx;
				}
			}

			.desc {
				flex: 1;
				font-size: $font-base;
				color: $font-color-dark;
			}
		}
	}

	.uni-timeline {
		padding: $spacing-lg;
		background-color: $color-white;
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 98;
		width: 100%;
		height: 100upx;
		background-color: $color-white;
		color: $font-color-base;
		padding-right: $spacing-sm;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
	}
	.action-btn {
		margin: $spacing-base $spacing-sm;
		float: right;
		padding: 0 $spacing-lg;
		text-align: center;
		height: 60upx;
		line-height: 60upx;
		font-size: $font-sm;
		color: $font-color-dark;
		background: #fff;
		border-radius: 100px;
		border: 1px solid rgba(0, 0, 0, 0.05);
		&:after {
			border-radius: 100px;
		}
		&.recom {
			background: #fff9f9;
			color: $base-color;
			&:after {
				border-color: #f7bcc8;
			}
		}
	}
	.rf-no-data {
		height: calc(100vh - 90upx);
	}
</style>
